<template>
	<div class="zoom">
		<el-button
			size="mini"
			icon="el-icon-minus"
			class="zoom-decrease"
			:disabled="zoom == 50"
			v-repeat-click="decrease"
		/>
		<span class="zoom-value" @click="reset">{{ zoom }}%</span>
		<el-button
			size="mini"
			icon="el-icon-plus"
			class="zoom-increase"
			:disabled="zoom == 300"
			v-repeat-click="increase"
		/>
	</div>
</template>
<script>
export default {
	props: {
		value: {
			type: Number,
			default: 100
		}
	},
	data() {
		return {
			zoom: this.value
		};
	},
	watch: {
		value(v) {
			this.zoom = v;
		},
		zoom(v) {
			this.$emit("input", v);
		}
	},
	methods: {
		decrease() {
			if (this.zoom == 50) return;
			this.zoom -= 10;
		},
		increase() {
			if (this.zoom == 300) return;
			this.zoom += 10;
		},
		reset() {
			this.zoom = 100;
		}
	}
};
</script>
<style lang="scss" scoped>
.zoom {
	position: absolute;
	right: 20px;
	top: 20px;
	width: 110px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	z-index: 10;
	&-decrease,
	&-increase {
		padding: 6px;
	}
	&-value {
		font-size: 12px;
		color: #333;
		cursor: pointer;
		user-select: none;
	}
}
</style>
